<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>订单详情</title>
    <meta content="yes" name="apple-mobile-web-app-capable"><!--可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果）-->
    <meta content="yes" name="apple-touch-fullscreen"><!--添加到主屏幕后，全屏显示-->
    <meta content="telephone=no,email=no" name="format-detection"><!--IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /><!--避免IE使用兼容模式-->
    <meta content="black" name="apple-mobile-web-app-status-bar-style"><!--仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ）-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../css/base.css"/>
    <link rel="stylesheet" href="../css/index.css"/>
</head>
<body>
<div class="order-detail">
    <header class="header">
        <div class="header-top">
            <div class="header-top-left">
                <img src="../images/mine/1@2x.png" alt="">
            </div>
            <div class="header-top-right">
                <p>罐体变形车模</p>
                <p>兑换时间：<span>2018-07-26 17:06:06</span></p>
                <p>订单状态：<span>已完成</span></p>
                <p>100积分</p>
            </div>
        </div>
        <div class="header-bottom">
            <p>订单号：CRF88888888</p>
        </div>
        <div class="cam">
            <p>卡密：<span id="camTxt">CRF88888888</span></p>
            <button id="camBtn">复制</button>
        </div>
    </header>
    <div id="information"></div>
</div>
<!--取消订单详情模板-->
<script type="text/html" id="cancelIformationTpl">
    <div class="cancel-information">
        <section class="detail-address">
            <div class="address-top">
                <div class="address-top-left"><span>配送至：</span><span>张三</span><span>13552398888</span></div>
                <div class="address-top-right">
                    <img src="../images/mall/location02@2x.png" alt="">
                </div>
            </div>
            <div class="address-bottom">
                <div class="address-bottom-left">
                    <img src="../images/mall/location@2x.png" alt="">
                </div>
                <p class="address-bottom-right">华彬大厦</p>
            </div>
        </section>
        <div class="tip">
            <p>订单详情：</p>
            <p>成功取消订单的积分，自取消成功当日起在三个工作日内返回您的账户。</p>
        </div>
    </div>
</script>
<!--物流详情模板-->
<script type="text/html" id="logisticsInformationTpl">
    <div class="logistics-information">
        <div class="logistics-title">
            <img src="../images/mine/order_wuliuxiangqing@2x.png" alt="">
        </div>
        <div class="logistics-list">
            <ul>
                <li>
                    <div class="logistics-list-left">
                        <div class="logistics-times">
                            <span>2018-07-26</span>
                            <span>20:01:06</span>
                        </div>
                        <div class="order-finish">
                            <img src="../images/mine/order_finish@2x.png" alt="">
                        </div>
                    </div>
                    <div class="logistics-list-right">
                        <p>到达【北京站】到达【北京站】到达【北京站】</p>
                    </div>
                </li>
                <li>
                    <div class="logistics-list-left">
                        <div class="logistics-times">
                            <span>2018-07-26</span>
                            <span>20:01:06</span>
                        </div>
                    </div>
                    <div class="logistics-list-right">
                        <p>到达【北京站】到达【北京站】到达【北京站】</p>
                    </div>
                </li>
                <li>
                    <div class="logistics-list-left">
                        <div class="logistics-times">
                            <span>2018-07-26</span>
                            <span>20:01:06</span>
                        </div>
                    </div>
                    <div class="logistics-list-right">
                        <p>到达【北京站】到达【北京站】到达【北京站】</p>
                    </div>
                </li>
                <li>
                    <div class="logistics-list-left">
                        <div class="logistics-times">
                            <span>2018-07-26</span>
                            <span>20:01:06</span>
                        </div>
                    </div>
                    <div class="logistics-list-right">
                        <p>到达【北京站】到达【北京站】到达【北京站】</p>
                    </div>
                </li>
                <li>
                    <div class="logistics-list-left">
                        <div class="logistics-times">
                            <span>2018-07-26</span>
                            <span>20:01:06</span>
                        </div>
                    </div>
                    <div class="logistics-list-right">
                        <p>到达【北京站】到达【北京站】到达【北京站】</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</script>

<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/template.js"></script>
<!--<script src="../js/index.js"></script>-->
<script>
    $(function () {
        var data = {};
        //data.status = '1';//未取消
        data.status = '0';//已取消
        data.back = true;//取消订单，积分已返

        if(data.status == '1') {
            var html = template('logisticsInformationTpl');
            $('#information').html(html);
        } else {
            //在模板里判断积分是否返还后再渲染模板
            var html = template('cancelIformationTpl');
            $('#information').html(html);
        }
        /*复制卡密*/
        function copyCam() {
            var camTxt = document.getElementById("camTxt").innerText;
            var oInput = document.createElement('input');
            oInput.value = camTxt;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            oInput.className = 'oInput';
            oInput.style.display='none';
            alert('复制成功');
        }
        $('#camBtn').on('click',function () {
            copyCam();
        })
    })
</script>
</body>
</html>